/* 按钮 */
$btn-min-width: 82px !default; // 按钮最小宽度
$btn-height: 30px !default; // 按钮默认高度
$btn-px: $spacing-small - 3 !default; // 按钮水平内边距
$btn-font-size: $font-size-default !default; // 按钮字体大小
$btn-border-radius: 3px !default; // 按钮边框
$btn-main-bg: $color-main !default; // 主按钮背景
$btn-main-bg-hover: $color-main-hover !default; // 主按钮背景滑过色
$btn-main-color: $color-text-inverse !default; // 主按钮文本色
$btn-secondary-bg: $color-secondary !default; // 辅助按钮背景
$btn-secondary-bg-hover: $color-secondary-hover !default; // 辅助按钮背景色
$btn-secondary-color: $color-text-inverse !default; // 辅助按钮文本色
$btn-weaking-bg: $color-weaking !default; // 弱化按钮背景
$btn-weaking-bg-hover: #f6faff !default; // 弱化按钮背景划过
$btn-weaking-border-color: $color-border-main !default; // 弱化按钮背景色
$btn-weaking-color: $color-main !default; // 弱化按钮文本色
$btn-weaking-color-hover: $color-main !default; // 弱化按钮文本色划过
$btn-weaking-border-color-hover: $color-main !default; // 弱化按钮背景色划过
$add-btn-size: 80px !default; // 添加按钮
$add-btn-size-small: 60px !default; // 添加按钮-小
$add-btn-size-large: 100px !default; // 添加按钮-大

// 按钮-默认
.tw-btn {
  display: inline-block;
  min-width: $btn-min-width;
  height: $btn-height;
  line-height: $btn-height - 2px;
  padding: 0 $btn-px;
  font-size: $btn-font-size;
  text-align: center;
  border: 1px solid transparent;
  border-radius: $btn-border-radius;
}

.tw-btn + .tw-btn {
  margin-left: $spacing-small - 4px;
}

// 主按钮
.tw-btn.xmain {
  color: $btn-main-color;
  background: $btn-main-bg;
  border-color: $btn-main-bg;

  &:hover {
    background: $btn-main-bg-hover;
    border-color: $btn-main-bg-hover;
  }
}

.tw-btn.xmain.x3d {
  box-shadow: 0 -1px 0 darken($btn-main-bg, 15%) inset;
}

// 铺按钮
.tw-btn.xsecondary {
  color: $btn-secondary-color;
  background: $btn-secondary-bg;
  border-color: $btn-secondary-bg;

  &:hover {
    background: $btn-secondary-bg-hover;
    border-color: $btn-secondary-bg-hover;
  }
}

.tw-btn.xsecondary.x3d {
  box-shadow: 0 -1px 0 darken($btn-secondary-bg, 15%) inset;
}

// 弱化按钮
.tw-btn.xweaking {
  color: $btn-weaking-color;
  background: $btn-weaking-bg;
  border-color: $btn-weaking-border-color;

  &:hover {
    color: $btn-main-bg-hover;
    border-color: $btn-main-bg-hover;
  }
}

.tw-btn.xweaking.x3d {
  box-shadow: 0 -1px 0 darken($btn-weaking-border-color, 15%) inset;
}

// 按钮-小
.tw-btn.xsmall {
  height: $btn-height - 6px;
  line-height: $btn-height - 8px;
}

.tw-btn.xsmall.xround {
  border-radius: ($btn-height - 6px) / 2;
}

// 按钮-中
.tw-btn.xmedium {
  height: $btn-height + 6px;
  line-height: $btn-height + 4px;
}

// 按钮-大
.tw-btn.xlarge {
  height: $btn-height + 10px;
  line-height: $btn-height + 8px;
}

.tw-btn.xlarge.xround {
  border-radius: ($btn-height + 6px) / 2;
}

// 按钮-超大
.tw-btn.xhuge {
  height: $btn-height + 10px;
  line-height: $btn-height + 10px;
  font-size: $font-size-medium;
}

.tw-btn.xhuge.xround {
  border-radius: ($btn-height + 10px) / 2;
}

// 宽度自适应
.tw-btn.xwauto {
  min-width: 0;
  padding: 0 $spacing-tiny;
}

// 添加按钮
.tw-addbtn {
  position: relative;
  display: inline-block;
  width: $add-btn-size;
  height: $add-btn-size;
  border: 1px dashed $color-border-main;

  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    margin-top: -1px;
    margin-left: -30%;
    border-top: 1px dashed $color-border-main;
  }

  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60%;
    margin-top: -30%;
    margin-left: -1px;
    border-left: 1px dashed $color-border-main;
  }

  &:hover {
    border-color: $color-main;

    &:before {
      border-top-color: $color-main;
    }

    &:after {
      border-left-color: $color-main;
    }
  }
}

// 添加按钮-小
.tw-addbtn.xsmall {
  width: $add-btn-size-small;
  height: $add-btn-size-small;
}

// 添加按钮-大
.tw-addbtn.xlarge {
  width: $add-btn-size-large;
  height: $add-btn-size-large;
}

// 添加按钮-带圆角
.tw-addbtn.xround {
  border-radius: 50%;
}

// 按钮-带圆角
.tw-btn.xround {
  border-radius: $btn-height / 2;
}

// 按钮-禁用
.tw-btn.xdisabled,
.tw-addbtn.xdisabled {
  cursor: not-allowed;
  opacity: .4;
}

// 按钮组
.tw-btngroup {
  display: inline-flex;
}

.tw-btngroup > li {
  margin-left: -1px;
}

.tw-btngroup > li > .tw-btn {
  border-radius: 0;
}

.tw-btngroup > li:first-child > .tw-btn {
  border-top-left-radius: $btn-border-radius;
  border-bottom-left-radius: $btn-border-radius;
}

.tw-btngroup > li:last-child > .tw-btn {
  border-top-right-radius: $btn-border-radius;
  border-bottom-right-radius: $btn-border-radius;
}

// 弱化按钮: 激活状态
.tw-btngroup > .xopen > .tw-btn.xweaking {
  color: $btn-main-color;
  background: $btn-main-bg;
  border-color: $btn-main-bg;
}

// 图标按钮
.tw-iconbtn {
  display: inline-block;
  padding: 0 3px;
}

.tw-iconbtn.xdisabled {
  cursor: not-allowed;
  opacity: .45;
}

// 按钮-收缩
.tw-btn.xcollapse {
  min-width: 40px;

  &:before {
    content: "";
    position: relative;
    top: -3px;
    color: #95a5b6;
    transition: all $time linear;
    @include arrow(down, 10px, 1px, #95a5b6);
  }
}

.tw-btn.xcollapse:hover:before {
  border-bottom-color: #08f;
  border-left-color: #08f;
}

.tw-btn.xcollapse.xopen {
  &:before {
    top: 2px;
    color: $btn-weaking-color-hover;
    transform: rotate(-225deg);
  }
}